<template>
  <div class="test2" style="width:1700px;height:800px;">
    <el-form :inline="true">
      <el-form-item label="产品类别">
        <el-select v-model="formData.model" placeholder="请选择产品类别" clearable>
          <el-option
            v-for="item in modelclass"
            :key="item.id"
            :label="item.info"
            :value="item.info"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div id="myChart2" style="width:1400px;height:600px;float:left;" />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from 'echarts'
// eslint-disable-next-line no-unused-vars
import productset from '@/api/product/productset'
// eslint-disable-next-line no-unused-vars
import productApi from '@/api/product/productset'
export default {
  name: 'Test2',
  data() {
    return {
      myChart2: '',
      xdata: [],
      ydata: [],
      modelclass: {},
      formData: {
        model: ''
      }
    }
  },
  watch: {
    'formData.model': function() {
      this.drawLine1()
    }
  },
  mounted: function() {
    this.drawLine1()
    this.getclass()
  },
  methods: {
    getclass() {
      productApi.getclass().then(res => {
        this.modelclass = res.data
      })
    },
    drawLine1() {
      productset.getCount(this.formData).then(res => {
        console.log(this.formData)
        this.xdata = res.data[0]
        this.ydata = res.data[1]
        // 基于准备好的dom，初始化echarts实例
        this.myChart2 = echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        this.myChart2.setOption({
          title: {
            text: '产品销售量', // 主标题
            subtext: '', // 副标题
            x: 'left' // x轴方向对齐方式
          },
          tooltip: {
            trigger: 'axis' // axis   item   none三个值
          },
          xAxis: {
            type: 'category', // 还有其他的type，可以去官网喵两眼哦
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0 // 显示全部刻度
            },
            data: this.xdata, // x轴数据
            name: '产品名称' // x轴名称
          },
          yAxis: {
            type: 'value',
            name: '销量' // y轴名称
          },
          legend: {
            orient: 'vertical',
            x: 'center'
          },
          series: [
            {
              name: '销售',
              data: this.ydata,
              type: 'bar',
              itemStyle: {
                color: '#73c0de',
                shadowColor: '#73c0de',
                borderType: 'dashed',
                opacity: 0.8
              },
              smooth: true
            }/*,
            {
              name: '产品销售量1',
              data: this.ydata,
              type: 'bar',
              itemStyle: {
                color: '#73c0de',
                shadowColor: '#73c0de',
                borderType: 'dashed',
                opacity: 0.5
              },
              label: {
                show: true
              }
            }*/
          ]
        })
      })
    }
  }
}
</script>
